<template>
  <div class="popup-content">
    <!--    我的频道-->
    <div class="my-channel channel">
      <van-cell :border="false" title="我的频道">
        <template #default>
          <van-button color="#f85959" round plain size="small" @click="isEdit=!isEdit">{{
              isEdit ? '完成' : '编辑'
            }}
          </van-button>
        </template>
      </van-cell>
      <!--    我的频道宫格-->
      <van-grid :column-num="4" :gutter="10">
        <!--icon让第一个不显示-->
        <van-grid-item :icon=" isEdit&&index!==0?'close':''"
                       v-for="(item,index) in myChannels"
                       :key="item.id"
                       :text="item.name"
                       :class="{active:index===activeIndex}"
                       @click="onClickMyChanelItem(index,item.id)"
        />

      </van-grid>
    </div>
    <!--    /我的频道-->

    <!--    推荐列表-->
    <div class="recommend-channel channel">
      <van-cell :border="false" title="推荐频道">
      </van-cell>
      <!--    频道列表-->
      <van-grid :column-num="4" :gutter="10" icon-size="0.32rem" direction="horizontal">
        <van-grid-item @click="addToMyCannel(item)" icon="plus" v-for="item in recommendCannel" :key="item.id"
                       :text="item.name"/>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { addUserChannels, delMyChannels, getAllChannels } from '@/api/channels'
import { Toast } from 'vant'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
  name: 'PopupContent',
  created () {
    this.loadAllChannels()
  },
  props: {
    myChannels: { // 我的频道
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allchannels: [], // 全部频道
      isEdit: false // 控制是否编辑

    }
  },
  computed: {
    recommendCannel () {
      // 获取全部频道减去 我的频道
      return this.allchannels.filter(channelItem => !this.myChannels.some(myItem => myItem.id === channelItem.id))
    },
    ...mapState(['user'])
  },
  methods: {
    // 加载所有频道
    async loadAllChannels () {
      try {
        const { channels } = await getAllChannels()
        this.allchannels = channels
      } catch (e) {
        Toast('系统异常')
      }
    },

    // 点击全部频道添加到我的频道
    async addToMyCannel (item) {
      // 视图添加
      this.myChannels.push(item)

      if (!this.user) {
        // 添加到本地
        return setItem('HMTT-CHANNELS', this.myChannels)
      }
      // 用户登录状态请求
      try {
        await addUserChannels({
          id: item.id,
          seq: this.myChannels.length
        })
      } catch (e) {
        Toast('添加失败')
      }
    },
    // 点击我的频道触发
    onClickMyChanelItem (index, id) {
      // 如果选中为推荐不做处理
      if (index === 0) return
      // 视图删除
      this.myChannels.splice(index, 1)
      // 当前未处于编辑状态,跳转
      if (!this.isEdit) return this.$emit('update-active', index, false)
      // 当前是编辑状态, 做删除
      if (index < this.activeIndex) {
        this.$emit('update-active', this.activeIndex - 1, true)
      }
      // 删除判断
      this.delStorage(id)
    },
    // 点击我的频道在编辑状态删除判断
    async delStorage (id) {
      if (!this.user) {
        // 更新到本地
        return setItem('HMTT-CHANNELS', this.myChannels)
      }
      // 发起请求
      try {
        await delMyChannels(id)
      } catch (e) {
        Toast('删除失败')
      }
    }
  }

}
</script>

<style scoped lang='less'>
.popup-content {
  padding-top: 90px;
  // 标题
  .van-cell {
    align-items: center;

    .van-button {
      width: 103px;
      height: 50px;
    }

  }

  // 宫格公共样式
  .channel {
    /deep/ .van-grid {
      .van-grid-item__content {
        width: 160px;
        height: 86px;
        background-color: #F4F5F6;
        border-radius: 6px;

        .van-grid-item__text {
          font-size: 28px;
          color: #222;
        }

        .van-grid-item__content::after {
          border: none;
        }
      }
    }
  }

  // 推荐宫格单独样式
  /deep/ .recommend-channel {
    .van-grid-item__text {
      margin-left: 0;
    }

  }

  // 我的宫格单独样式

  /deep/ .my-channel {
    .van-grid-item__icon + .van-grid-item__text {
      margin-top: 0;
    }

    .van-icon-close {
      font-size: 32px;
      position: absolute;
      top: -10px;
      right: -10px;
    }

    .active {
      .van-grid-item__text {
        color: #f85959 !important;
      }
    }
  }
}
</style>
